import React from "react";
import { useState } from "react";
import '../styles/LoginTextField.css'


function LoginTextField({label, validator, message, type, onChange, value}){
    const [fullName, setFullName] = useState('');
    const [isValid, setIsValid] = useState(true);
    
    const handleInputChange = (e) => {
        const input = e.target.value;
        const isValidInput = validator(e.target.value);
        setFullName(input);
        setIsValid(isValidInput);
    };

    const handleChange = (e) => {
      onChange(e.target.value)
    }
      
        return (
          <div className='input-container'>
            <label>{label}</label>
            <input
              type={type}
              value={value}
              onChange={handleChange}
              style={{ borderColor: isValid ? 'rgb(1, 121, 7)' : 'red' }}
            />
            {!isValid && <p className="error-message">{message}</p>}
          </div>
      
    )
}
export default LoginTextField;